<script setup lang="ts">
import { ref, defineProps, watch } from 'vue'
import vueQr from 'vue-qr/src/packages/vue-qr.vue'

// 定义组件接收的props
const props = defineProps<{
  textVal: string  // 外部传入的文本值
}>()

// 内部维护的二维码值
const qrcodeVal = ref(props.textVal)

// 监听props变化，自动更新二维码
watch(
  () => props.textVal,
  (newVal) => {
    qrcodeVal.value = newVal
  },
  { immediate: true }  // 初始时立即执行
)

// 手动生成二维码
function getQrCodeClick() {
  qrcodeVal.value = props.textVal
}

// 二维码生成后的回调
function getImgInfo(qrUrl: string) {
  // 可以根据需求进行一些处理
  console.log('二维码图片地址:', qrUrl)
}
</script>

<template>
  <div class="example">
      <div class="select-row">
        <input class="qr-input" type="text" :value="textVal"  />
        <el-button type="primary" class="getBtn" @click="getQrCodeClick">
          生成
        </el-button>
      </div>
      <div class="qrcode-img">
          <vue-qr 
            :text="qrcodeVal" 
            :size="280" 
            :callback="getImgInfo"
          ></vue-qr>
     </div>
  </div>
</template>

<style lang="scss" scoped>
.qr-input {
  width: vw(751);
  height: vw(80);
  padding: 0 vw(19);
  color: #fff;
  font-size: vw(24);
  border-radius: vw(8);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: none;
}

.qrcode-img {
  width: vw(280);
  height: vw(280);
  margin: vw(175) auto 0;
  border-radius: vw(24);
  overflow: hidden;
  
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.select-row {
  display: flex;
  gap: vw(20);
  align-items: center;
}
</style>
